<template>
	<view class="container">
		<uni-nav-bar :title="status == 'detail' ? '点采订单详情':'修改点采订单'" fixed statusBar :border="false" height="88rpx" left-icon="left" @clickLeft="onClickLeft"></uni-nav-bar>
		<view class="list" v-if="status == 'detail'">
			<view class="item" v-for="(item,index) in goodsList" :key="item.id">
				<view class="pic">
					<image :src="item.commodityImgUrl ? item.commodityImgUrl:'/static/index/noneImg.png'" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="title u-ellipsis">
						{{ item.commodityName }}
					</view>
					<view class="subtitle">
						<text>规格：{{ item.commodityStandard }}</text>
						<text>品牌：{{ item.commodityBrand }}</text>
						<text>采购价：{{ item.outboundPrice }}元</text>
						<text>售价：{{ item.storePrice }}</text>
						<text>配送规格：{{ item.deliveryNorms }}</text>
						<text>单品数量：{{ item.procureCount }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="list1" v-else :style="{paddingBottom: `calc(${safeAreaBottom}px + 80rpx	)`}">
			<view class="item" v-for="(item,index) in goodsList" :key="item.id">
				<view class="top">
					<view class="title u-ellipsis">
						{{item.commodityName}}
					</view>
					<view class="sub_title">
						规格：{{ item.commodityStandard }}
					</view>
				</view>
				<view class="bottom">
					<view class="pic">
						<image :src="item.commodityImgUrl ? item.commodityImgUrl:'/static/index/noneImg.png'" mode="aspectFill"></image>
					</view>
					<view class="info">
						<view class="sub_title">点采价：{{ item.outboundPrice }} 元</view>
						<view class="sub_title">售价：{{ item.storePrice }} 元</view>
						<view class="sub_title">配送规格：{{ item.deliveryNorms }}</view>
						<view class="sub_title">品牌：{{ item.commodityBrand }}</view>
						<view class="sub_title">
							单品数量：<uni-number-box v-model="item.procureCount" :step="item.deliveryNorms" :min="item.deliveryNorms"
								:max="item.deliveryNorms * 10000" />
						</view>
						<view class="sub_title" @click.stop="delPurchase(item)"><uni-icons type="trash" size="30" color="#f54343"></uni-icons></view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="status == 'edit'" class="bottomFix btn type-1 toLeft" :style="{paddingBottom:safeAreaBottom + 'px'}" @click.stop="toSubmit">
			<text>确 认 提 交</text>
		</view>
		<view v-if="status == 'edit'" class="bottomFix btn type-4 toRight" :style="{paddingBottom:safeAreaBottom + 'px'}" @click.stop="delAll">
			<text>清空</text>
		</view>
	</view>
</template>

<script>
	let safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom;
	import { reqPurchaseWait,reqEditPurchase } from '@/apis/goods.js'
	export default {
		name: "OrderDetail",
		data() {
			return {
				safeAreaBottom: safeAreaBottom,
				pickId:'',
				goodsList: [],
				status:'detail',
				storePickIdList:[],
			}
		},
		onLoad(params) {
			this.pickId = params?.pickId;
			this.status = params?.status;
			if(this.status == 'detail'){
				uni.setNavigationBarTitle ({ title: '点采订单详情'});
			}else {
				uni.setNavigationBarTitle ({ title: '修改点采订单'});
			}
			this.getOrderList();
		},
		methods: {
			async getOrderList() {
				let res = await reqPurchaseWait({pickId:this.pickId});
				if (res.code === 200) {
					this.goodsList = res.data;
				}
			},
			delPurchase(item) {
				let { id } = item;
				uni.showModal({
					content: '是否删除该商品?',
					success: (res) => {
						if (res.confirm) {
							this.goodsList = this.goodsList.filter(item => item.id != id)
							this.storePickIdList.push(id);
						} else if (res.cancel) {
							console.log('取消');
							//TODO
						}
					}
				})
			},
			async toSubmit() {
				let { storePickIdList,pickId } = this;
				let storePickVoList = this.goodsList.map(item =>
					({
						id: item.id,
						commodityId: item.commodityId,
						procureCount: item.procureCount,
						deliveryNorms: item.deliveryNorms
					})
				)
				let res = await reqEditPurchase({ pickId,storePickIdList,storePickVoList })
				if (res.code === 200) {
					uni.utils.toast('提交成功', 'success', true);
					setTimeout(()=>{
						this.$navBack();
					},1000)
				}
			},
			async delAll() {
				if(this.goodsList.length === 0) {
					uni.utils.toast('暂无商品');
					return ;
				}
				uni.showModal({
					content: '是否清空商品?',
					success: (res) => {
						if (res.confirm) {
							this.storePickIdList = this.goodsList.map(item => item.id);
							this.goodsList = [];
							uni.utils.toast('清空后需提交订单');
						} else if (res.cancel) {
							console.log('取消');
							//TODO
						}
					}
				})
			}
		},
	}
</script>

<style>
	page {
		background: #f7f7f7;
	}
</style>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
	}

	.list {
		padding: 20rpx 20rpx;
		padding-bottom: 0;

		.item {
			display: flex;
			padding: 20rpx 24rpx;
			background-color: #fff;
			border-radius: 8rpx;
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}
			.pic {
				width: 200rpx;
				height: 200rpx;
				background-color: #f7f7f7;
			
				image {
					width: 100%;
					height: 100%;
				}
			}
			
			.info {
				padding-left: 20rpx;
				flex: 1;
				min-width: 440rpx;
				display: flex;
				flex-direction: column;
			
				.title {
					width: 100%;
					margin-bottom: 20rpx;
					font-size: $uni-font-size-upBase;
					color: #000;
				}
			
				.subtitle {
					display: flex;
					flex-wrap: wrap;
					text {
						font-size: $uni-font-size-mini;
						width: 50%;
						color: #333;
						margin-bottom: 10rpx;
					}
				}
			}
		}
	}




	.list1 {
		padding: 20rpx 20rpx;
		padding-bottom: 0;
	
		.item {
			padding: 20rpx 24rpx;
			background-color: #fff;
			border-radius: 8rpx;
			margin-bottom: 20rpx;
	
			&:last-child {
				margin-bottom: 0;
			}
	
			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				margin-bottom: 10rpx;
	
				.title {
					width: 500rpx;
					font-size: $uni-font-size-upBase;
					color: #000;
				}
	
				.sub_title {
					font-size: $uni-font-size-mini;
					flex: 1;
					color: #333;
					text-align: right;
				}
			}
	
			.bottom {
				display: flex;
	
				.pic {
					width: 200rpx;
					height: 200rpx;
	
					image {
						width: 100%;
						height: 100%;
						background-color: #f7f7f7;
					}
				}
	
				.info {
					padding-left: 20rpx;
					flex: 1;
					min-width: 440rpx;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
	
					.sub_title {
						font-size: $uni-font-size-mini;
						width: 50%;
						color: #333;
	
						&:last-child {
							text-align: right;
							width: 20%;
						}
	
						&:nth-last-child(2) {
							display: flex;
							align-items: center;
							width: 80%;
						}
					}
				}
			}
		}
	}
	
	.bottomFix {
		position: fixed;
		width: 50%;
		height: 80rpx;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: $uni-font-size-base;
	}
	.toLeft {
		left: 0,
	}
	.toRight {
		right: 0,
	}
</style>